<template>
  <div class="small-upload miniSize">
    <el-upload
      class="avatar-uploader"
      action=""
      :accept="accept"
      :show-file-list="false"
      :http-request="httpUpload"
      :disabled="uploadStar"
      v-loading="uploadStar"
      element-loading-text="上传中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <template v-if="fileName">
        <img v-if="fileType.indexOf('image') > -1" :src="fileUrl" class="avatar">
        <div v-else class="fileView">
          <div class="fileNames">
           {{ fileName }}
          </div>
        </div>
        <i v-if="storage" class="viewImg el-icon-view" title="预览" @click.stop="viewFile" />
        <i class="deleteImg el-icon-delete" @click.stop="deleteImg" />
      </template>
      <template v-else>
        <i class="el-icon-plus avatar-uploader-icon" />
      </template>
      <!-- 进度条 -->
      <!-- <el-progress
        v-if="uploadStar"
        type="circle"
        :percentage="percentage"
        :status="status"
        class="upload-progress"
        text-color="#ffffff"
        :width="80"
      /> -->
    </el-upload>
    <el-dialog append-to-body center width="96%" top="2vh" :title="title" :visible.sync="dialogTableVisible">
        <template v-if="dialogTableVisible && iframeUrl">
            <div v-if="fileType.indexOf('image') > -1" class="preview_viewer" style="width: 100%;position: relative;height:calc(96vh - 110px);">
               <div id="viewImages" v-viewer.static="{movable: true,inline: true,navbar:false}" class="images">
                 <img v-show="false" :src="iframeUrl" alt="">
               </div>
             </div>
            <iframe v-else style="height: calc(96vh - 150px);" :src="iframeUrl" width="100%" height="100%" frameborder="0" />
        </template>
    </el-dialog>
  </div>
</template>

<script>
import ajax from '@/ajax';
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from 'v-viewer'
export default {
  name:"upload",
  directives: {
    viewer: viewer({
      debug: true
    })
  },
  props: {
    accept: {
      default: 'image/*'
    },
    index: {
      default: 0
    },
    file: {
      default: null
    },
    task: {
      default: null
    },
    permission: {
      default: ''
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      percentage: 0,
      status: null,
      uploadStar: false,
      storage: null,
      title: '文件预览',
      doTask: false,
      fileType: "",
      fileUrl: "",
      fileName: "",
      iframeUrl:""
    }
  },
  watch: {
    file() {
      this.iframeSrc = ""
      // console.log(this.file,333)
      if (this.file && typeof (this.file) === 'object' && !this.file.localId) {
          this.storage = this.file
          this.fileType = this.storage.fileType
          this.fileName = this.storage.fileName
          this.fileUrl = this.storage.fileUrl
          if(this.fileType.indexOf("pdf")>-1 || this.fileType.indexOf("image")>-1){
            this.iframeUrl = this.fileUrl
          }
      } else {
        this.storage = null
      }
    }
  },
  created() {
    if (this.file && typeof (this.file) === 'object' && !this.file.localId) {
        this.storage = this.file
        this.fileType = this.storage.fileType
        this.fileName = this.storage.fileName
        this.fileUrl = this.storage.fileUrl
        if(this.fileType.indexOf("pdf")>-1 || this.fileType.indexOf("image")>-1){
          this.iframeUrl = this.fileUrl
        }
    } else {
      this.storage = null
    }
    if (this.task) {
      this.doTask = true
      this.httpUpload(this.task)
    }
  },
  methods: {
    httpUpload(file) {
      const currentFile = file.file
      this.fileType = currentFile.type
      this.fileName = currentFile.name
      this.fileUrl = ""
       console.log(currentFile)
      if (this.fileType.indexOf('image') > -1) {
        this.fileUrl = URL.createObjectURL(currentFile)
      }
      this.uploadStar = true
      this.percentage = parseInt(0)
      this.status = null
      this.uploadToCloud(currentFile)
    },
    uploadToCloud(file){
        const currentFile = file
        let random = new Date().getTime()
        let fileName = currentFile.name
        const uploadTask = xxcCloud.uploadFile({
            cloudPath:'shry/' + random + fileName,
            file: currentFile,
            fail:error=>{},
            onUploadProgress:r=>{console.log('上传进度', r)},
            complete:com=>{},
            success:res=>{
                if(res.fileID){
                    let url = "https://6363-ccg-database-1gns3p717137a34c-1322979516.tcb.qcloud.la/shry/" + random + fileName
                    this.uploadSuccess({
                        fileID:res.fileID,
                        fileType:this.fileType,
                        fileName:this.fileName,
                        fileUrl:url,
                    })
                }
            }
        })
        uploadTask.onProgressUpdate((res) => {
                console.log('上传进度', res)
            })
    },
    uploadSuccess(file) {
      this.status = 'success'
      this.$emit('unload-success',file, this.index, this.doTask)
      setTimeout(() => {
      		this.uploadStar = false
      		this.status = null
      		this.percentage = 0
      	}, 1000)
      this.doTask = false
    },
    deleteImg() {
      this.storage = null
      this.fileType = null
      this.fileName = null
      this.fileUrl = ""
      this.$emit('remove-file', this.index)
    },
    viewFile() {
      if (this.fileType.indexOf("pdf")>-1 || this.fileType.indexOf("image")>-1) {
        this.title = this.fileName + '预览'
        this.iframeSrc = this.iframeUrl
        this.dialogTableVisible = true
      } else if (this.file) {
        const a = document.createElement('a')
        a.href = this.fileUrl
        a.target = '_blank'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }
  }
}
</script>

<style>
    .small-upload{
        display: inline-block;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .miniSize .avatar-uploader-icon{
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
        object-fit: contain;
    }
    .miniSize .avatar {
        width: 80px;
        height: 80px;
    }
    .deleteImg {
        position: absolute;
        font-size: 24px;
        bottom: 5px;
        right: 5px;
        color: #0077f5;
        background-color: #ffffff;
    }
    .miniSize .deleteImg{
        font-size: 18px;
        bottom: 0px;
        right: 0px;
    }
    .deleteImg:hover {
        color: #F56C6C;
    }
    .viewImg {
        position: absolute;
        font-size: 24px;
        bottom: 5px;
        left: 5px;
        color: #0077f5;
        background-color: #ffffff;
    }
    .miniSize .viewImg{
        font-size: 18px;
        bottom: 0px;
        left: 0px;
    }
    .viewImg:hover {
        color: #F56C6C;
    }
    .miniSize .fileView {
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
    }
    .fileView {
        width: 178px;
        height: 178px;
        position: relative;
        text-align: center;
    }

    .fileNames {
        width: 100%;
        color: #1890ff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 28px;
    }
    .fileNames i{
        font-size: 24px;
    }
    .miniSize .fileNames{
        line-height: 15px;
        font-size: 12px;
    }
    .miniSize .fileNames i{
        font-size: 20px;
    }
    .upload-progress {
      position: absolute;
      top: 0;
      left:0;
      width: 80px;
      height: 80px;
      z-index: 888;
      background: rgba(0,0,0,.5);
    }
</style>
